<template>
  <div class="demo">
    <div class="demo-title">选择和操作</div>
    <div class="demo-content">
      <div style="margin-bottom: 16px">
        <Button type="primary" :disabled="!hasSelected" @click="start"> Reload </Button>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `Selected ${state.selectedRowKeys.length} items` }}
          </template>
        </span>
      </div>
      <Table
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="data"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, reactive } from 'vue';
  import Button from '@sscd/button';
  import Table from '@sscd/table';
  type Key = string | number;
  interface DataType {
    key: Key;
    name: string;
    age: number;
    address: string;
  }
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];
  const data: DataType[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }
  const state = reactive<{
    selectedRowKeys: Key[];
    loading: boolean;
  }>({
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  });
  const hasSelected = computed(() => state.selectedRowKeys.length > 0);
  const start = () => {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      state.selectedRowKeys = [];
    }, 1000);
  };
  const onSelectChange = (selectedRowKeys: Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
  };
</script>
